<template>
    <div class="container">
        <el-steps :active="active" align-center finish-status="success">
            <template v-for="(item, index) in stepsTitle" :key="index">
                <el-step :title="item"/>
            </template>

        </el-steps>
        <div class="mt-5 mb-5">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts">
    import {defineComponent, ref, toRefs} from 'vue'

    export default defineComponent({
        name: "Setps",
        props: {
            stepsTitle: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        setup(props) {
            //步骤
            const active = ref(0)
            const toRefsVal = toRefs(props);
            const steps = toRefsVal.stepsTitle.value.length
            const next = () => {
                if (active.value < steps-1) {
                    active.value++
                } else {
                    active.value = 0
                }
            }

            const prev = () => {
                if (active.value > 0) {
                    active.value--
                }
            }

            return {
                active,
                next,
                prev,
            }
        }
    })
</script>

<style lang="scss" scoped>
    ::v-deep .el-step {
        .el-step__title {
            font-weight: normal;
        }

        .is-process {
            color: var(--el-color-primary);
            border-color: var(--el-color-primary);

            .is-text {
                background: var(--el-color-primary);
                color: var(--el-color-white);
            }
        }

        .el-step__icon {
            width: 2rem;
            height: 2rem;
            border-width: 1px;

            .el-step__icon-inner {
                font-weight: normal;
            }
        }

        .el-step__line {
            top: 1rem;
        }

        .el-step__main {
            .el-step__title {
                line-height: 2rem;
                padding-bottom: 0px;
            }
        }

        .el-step__line {
            height: 1px;
        }
    }
</style>